<template>
  <div>
    <ul class="icon_lists dib-box" v-on:focus.native="onFocus">
      <li class="dib" v-for="icon in iconList">
        <span class="icon iconfont"><span v-html="icon.icon"></span></span>
        <div class="name">{{icon.name}}</div>
        <div class="code-name">&amp;#xe616;</div>
      </li>
    </ul>
  </div>
</template>
<script>
  import menu from '@/assets/iconfont/menu/iconfont.json'
  import base from '@/assets/iconfont/base/iconfont.json'

  export default {
    data () {
      return {
        iconList: []
      }
    },
    created () {
      for (let row of menu.glyphs) {
        row.icon = '&#x' + row.unicode
        this.iconList.push(row)
      }
      for (let row of base.glyphs) {
        row.icon = '&#x' + row.unicode
        this.iconList.push(row)
      }
      //      this.clickBind()
    },
    methods: {
      onSelectIcon (code) {
        alert(code)
      },
      onFocus () {
        alert(11)
      }
    },
    mounted () {
      let _that = this
      this.$nextTick(() => {
        let elms = document.querySelectorAll('li.dib')
        for (let i = 0; i <= elms.length; i++) {
          (function (index) {
            elms[i].addEventListener('click', (evt => {
              let code = elms[index].getElementsByClassName('iconfont')[0].innerHTML
              _that.$emit('selected-event', code)
            }), false)
          })(i)

        }
      })
    }
  }
</script>
<style>
  .icon_lists.dib-box {
    width: 100%;
  }

  .icon_lists.dib-box::-webkit-scrollbar {
    width: 0px;
  }

  .icon_lists.dib-box {
    max-height: 480px;
    overflow-y: scroll;
  }

  .icon_lists.dib-box .dib {
    display: inline-block;
    width: 15%;
    height: 80px;
    text-align: center;
    padding-top: 20px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;

  }

  .icon_lists.dib-box .dib .name {
  }

  .icon_lists.dib-box .dib .iconfont {

    font-size: 26px;
  }

  .icon_lists.dib-box .dib:hover {
    background: rgba(193, 195, 196, 0.18);
  }

  .icon_lists.dib-box .dib .iconfont:hover {
    font-size: 30px;
  }
</style>
